import Vue from "vue";
import App from "./App.vue";

import router from "./router";
import store from "./store";

import "./assets/style/base.css"; //基础样式
import "./assets/style/el-reset.css"; //全局重设element-ui的样式

//完整引入
import ElementUI from "element-ui"; //element核心文件
import "element-ui/lib/theme-chalk/index.css"; //element的css文件
//基于element-ui 二次分装的一个菜单
import qfSubMenu from "qf-sub-menu"

//引入进度条
import nprogress from "nprogress"
// 引入进度条css文件
import "nprogress/nprogress.css"
Vue.use(ElementUI);
Vue.use(qfSubMenu)
// Vue.config.productionTip = false;

//全局前置钩子 前置守卫 beforeEach

// 判断本地有没有存储token 如果存储了 说明登入了=》自由访问页面
// 没有登入就只能访问login
router.beforeEach(function (to, from, next) {
  nprogress.start()
  //获取token
  let token = localStorage.getItem("bd-token");

  if (token) {
    // 登入后才能获取用户的菜单，在这里获取菜单的目的是为了刷新页面
    // 或者进入页面数据丢失的问题
    // 判断vuex中 sideMenu是否有长度
    if(!store.state.sideMenu.length){
      store.dispatch("FETCH_MENULIST")
      .then(()=>{
        //这里要注意, next里面要传参数即要进入的页面的路由信息，
        // 因为next传参数后，当前要进入的路由会被废止，
        // 转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效了。
        next({path:to.path})
      })
    }else{
      next()
    }
  
  } else {
    //没有token 没登入 只让访问登入页
    // 判断当前的访问的是不是登入页
    if (to.path === "/login") {
      //访问的是login放行
      next();
    } else {
      // 访问的不是login重新跳转到登入页
      next({
        path: "/login",
      });
    }
  }

  //to是去哪个页面

  //from从哪个页面来

  // next 放行
});
// 自定义鉴权指令
Vue.directive("has",{
  inserted(el,binding){
    // 从本地取出用户的按钮权限
    let permission=localStorage.getItem("permissionButtons")||'[]'
    permission=JSON.parse(permission)
    // console.log(permission);
    // 看permission中是否包含传入的value字段
    // 如果包含说明具备该按钮权限
    if(!permission.includes(binding.value)){
        // 先保存原来的类名
        let ElclassName=el.className;
        // 用原来的类名加上is-disabled触发禁用样式
        el.className=ElclassName+" "+"is-disabled"
        // 真正禁用按钮
        el.disabled=true;
    }
  }
})
// 全局后置钩子
router.afterEach((to,from)=>{
  nprogress.done()
    //  console.log(to);
     let matched=to.matched.slice(1)
    //  console.log(matched);
    // 调用commit触发mutation更改vuex中存储的面包屑
    store.commit("SET_BREADCRUMB",matched)
})

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
